<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>天知道</title>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/iconfont.css" />
    <link rel="stylesheet" href="css/main2.css" />
    <style>
        .tem .iconfont {
            font-size: 50px;
        }

        .weather-enter-active {
            transition: all 2s;
        }

        .weather-enter {
            transform: translateY(200px);
            opacity: 0;
        }

        .weather-enter-active:nth-child(2) {
            transition-delay: 0.2s;
        }

        .weather-enter-active:nth-child(3) {
            transition-delay: 0.4s;
        }

        .weather-enter-active:nth-child(4) {
            transition-delay: 0.6s;
        }

        .weather-enter-active:nth-child(5) {
            transition-delay: 0.8s;
        }
    </style>
</head>

<body>
    <div class="wrap" id="app">
        <div class="search_form">
            <div class="logo"><img src="img/logo.png" alt="logo" /></div>
            <div class="form_group">
                <input type="text" class="input_txt" placeholder="请输入查询的天气" v-model="city" @keydown.enter="search" />
                <button class="input_sub" @click="search" :class="{loading:flag}">搜 索</button>
            </div>
            <div class="hotkey">
                <a href="javascript:;" @click="clickHot('北京')">北京</a>
                <a href="javascript:;" @click="clickHot('上海')">上海</a>
                <a href="javascript:;" @click="clickHot('广州')">广州</a>
                <a href="javascript:;" @click="clickHot('深圳')">深圳</a>
            </div>
        </div>
        <ul class="weather_list">
            <transition-group name="weather">
                <li v-for='(item,index) in info' :key='index'>
                    <div class="info_type">
                        <span class="iconfont" v-if='item.type.includes("小雨")'>&#xe932;</span>
                        <span class="iconfont" v-else-if='item.type.includes("雨")'>&#xe931;</span>
                        <span class="iconfont" v-else-if='item.type.includes("晴")'>&#xe933;</span>
                        <span class="iconfont" v-else-if='item.type.includes("雨夹雪")'>&#xe934;</span>
                        <span class="iconfont" v-else-if='item.type.includes("阴")'>&#xe92d;</span>
                        <span class="iconfont" v-else-if='item.type.includes("风")'>&#xeb8c;</span>
                        <span class="iconfont" v-else-if='item.type.includes("雪")'>&#xeb87;</span>
                        <span class="iconfont" v-else-if='item.type.includes("多云")'>&#xeb79;</span>
                        <span class="iconfont" v-else-if='item.type.includes("雷")'>&#xeb77;</span>
                        <span class="iconfont" v-else-if='item.type.includes("冰雹")'>&#xeb76;</span>
                        <span class="iconfont" v-else-if='item.type.includes("雾霾")'>&#xeb75;</span>
                        <!-- 其他类别的天气 -->
                        <span class="iconfont" v-else>{{}}</span>
                    </div>
                    <div class="info_temp">高 <b>{{item.high.split(" ")[1]}}</b><br />低 {{item.low.split(" ")[1]}}</div>
                    <div class="info_date"><b>{{city}}</b><span>{{item.date}}</span></div>
                </li>
            </transition-group>
        </ul>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>

    <!-- 思路分析
    1:完成搜索获取数据
      a:v-model绑定input框
      b:给input框与button绑定事件
      c:实现搜索调用接口axios
      d:button的loading状态处理
    2：将接口获取数据展示到页面上
      a:v-for列表处理
      b:v-if天气处理
      c:其它数据用{{}}
    3:实现城市快捷点击功能
      a:给四个城市绑定事件
      b:事件首先修改input框的值为当前城市的值
      c:实现城市接口调用
    4:完成动画
      a:先完成整体动画
      b:为动画加入延时处理
    -->
    <script>
        new Vue({
            el: '#app',
            data: {
                city: '',
                info: [],
                flag: false
            },
            methods: {
                clickHot(city) {
                    this.city = city
                    this.search()
                },
                search() {
                    if (this.city.trim() == '') {
                        return this.info = []
                    }
                    // 在搜索新数据之前把旧数据清空
                    this.info = []
                    this.flag = true
                    axios({
                        url: 'http://wthrcdn.etouch.cn/weather_mini',
                        method: 'get',
                        params: { city: this.city }
                    }).then(res => {
                        //成功回调
                        this.info = res.data.data.forecast
                        this.flag = false
                    });
                }
            }
        })
    </script>
</body>

</html>